1 自己嘗試研究 API
npm install -g json-server
安裝 json-server npm 套件。
結果裝成npm install json-server
,就安裝失敗(附註:詳見另一篇,還沒寫好)之後亂查,還 google 到了
curl -X -GET https://...
,好像是可以用在新增 JSON 資料(curl -X -POST
)、取得資料(curl -X -GET
)、刪除資料(curl -X -DELETE
)。
好像想起來了,可以用在批次下載指令,以前做報告時,我有用過在下載每一小時的衛星雲圖。我這次嘗試使用curl -X -GET https://... > db.json
下載後,印到 db.json 檔案裡。後來一想,API 串接的概念,就是資料交換,把資料下載下來好像哪裡不太對,因為不正是資料太大或者是想要借用別人的資料,才使用資料交換的概念嗎?如果下載下來,好像不太符合初衷。又繼續 Google,看到了這個網頁 JSON Server tutorial
簡直是救星,掃描了一下內容,發現關鍵字get_request.js
,還不拿來參考一下,還安裝了 npm 套件的 axios,這次學聰明了,使用npm install -g axios
就成功安裝。
// get_request.js
const axios = require('axios');
axios.get('http://localhost:3000/users')
.then(resp => {
data = resp.data;
data.forEach(e => {
console.log(`${e.first_name}, ${e.last_name}, ${e.email}`);
});
})
.catch(error => {
console.log(error);
});
然後我就很開心的拿來修改,把 data.forEach(e => {... data = resp.data}
的部分改成我要的迴圈:列出前十本書籍的 id 以及書名,輸出跟 index.js 程式碼如下:
// index.js
const axios = require('axios');
axios.get('https://lidemy-book-store.herokuapp.com/books')
.then(resp => {
data = resp.data;
for (let i=1; i<=10; i++) {
console.log(data[i].id, data[i].name)
}
})
.catch(error => {
console.log(error);
});
# @terminal
$ node index.js # 執行 javascript,輸出前十本書
1 克雷的橋
2 當我想你時,全世界都救不了我
3 我殺的人與殺我的人
4 念念時光真味
5 蜂蜜花火【致年少時光‧限量插畫設計書衣典藏版】
6 苦雨之地
7 你已走遠,我還在練習道別
8 想把餘生的溫柔都給你
9 你是我最熟悉的陌生人
10 偷書賊(25萬本紀念版本)
然後我就抱著喜悅開心的睡覺了,也沒有細查什麼是 axios
。結果隔天早上熊熊想到,那到底是什麼套件啊...這麼神奇,而且我也看不懂 then
的意思,這樣交作業好像不太負責任。查了一下 axios
好像跟 vue 有關,又仔細想想,好像還沒學到 vue,所以不能使用,所以我昨天花了半天繞一大圈的找資料,最後又回歸了最原始的方法,就是回去看 [NET101] API串接的實戰影片。
2 回歸原始方法,研究範例
想說如法炮製,試試看 console.log(body)
會印出什麼資料。
// index.js 範例 1
const request = require('request');
request(
'https://lidemy-book-store.herokuapp.com/books',
function (error, response, body) {
console.log('body:',body) // 現在要測試印出的檔案資料長什麼樣
}
)
$ node index.js
[
{
"id": 1,
"name": "克雷的橋"
},
{
"id": 2,
"name": "當我想你時,全世界都救不了我"
},
{
"id": 3,
"name": "我殺的人與殺我的人"
},
{
"id": 4,
"name": "念念時光真味"
},
{
"id": 5,
"name": "蜂蜜花火【致年少時光‧限量插畫設計書衣典藏版】"
},
{
"id": 6,
"name": "苦雨之地"
},
{
"id": 7,
"name": "你已走遠,我還在練習道別"
},
{
"id": 8,
"name": "想把餘生的溫柔都給你"
},
{
"id": 9,
"name": "你是我最熟悉的陌生人"
},
{
"id": 10,
"name": "偷書賊(25萬本紀念版本)"
},
{
"id": 11,
"name": "在回憶消逝之前"
},
{
"id": 12,
"name": "懲罰"
},
{
"id": 13,
"name": "雲邊有個小賣部"
},
{
"id": 14,
"name": "颶光典籍三部曲:引誓之劍(上下冊套書)"
},
{
"id": 15,
"name": "危險維納斯"
},
{
"id": 16,
"name": "大旱"
},
{
"id": 17,
"name": "最後的再見"
},
{
"id": 18,
"name": "解憂雜貨店【暢銷35萬冊暖心紀念版】:回饋讀者,一次收藏2款書封!"
},
{
"id": 19,
"name": "高山上的小郵局:獻給書信和手寫年代的溫暖情詩,2019年最治癒人心的高暖度小說"
},
{
"id": 20,
"name": "在場證明"
}
]
結果印出書本目錄,現在我只需要前十本,所以需要使用拿手的迴圈來找出十本書,於是我加了以下迴圈。
const request = require('request');
request(
'https://lidemy-book-store.herokuapp.com/books' ,
function (error, response, body) {
try {
/* 新增這個迴圈, */
for (let i=0; i<10; i++) {
console.log(body[i].id, body[i].name)
}
/* 新增以上 */
} catch(error){
cosole.log(error)
}
}
)
結果印出 undefined。
$ node index.js
undefined undefined
undefined undefined
undefined undefined
undefined undefined
undefined undefined
undefined undefined
undefined undefined
undefined undefined
undefined undefined
undefined undefined
現在就要來看看到底發生什麼事情,console.log(body[i].id, body[i].name)
中變數的表示法是 object 的表示法,但是 body 是什麼型態呢?使用 console.log(typeof(body))
後發現是 string 的變數型態。就想到 [NET101] 7-3 API 串接實戰的範例 1:DELETE 中的 const json = JSON.parse(body) //JSON 格式的字串
,看不懂 JSON.parse() MDN 的用法,就去查詢發現: API 文件內的格式是JSON字串,所以我需要把資料從 JSON 格式的字串轉換成 JavaScript 的物件,這樣才能使用 body[i].id
在 js 檔案內擷取資料。
修改 js 檔案,如下:
const request = require('request');
request(
'https://lidemy-book-store.herokuapp.com/books' ,
function (error, response, body) {
/* 新增以下此行:查詢一下資料( body )的資料型態,發現是 string */
// console.log(typeof(body)) //typeof(body) is string
try {
/* 新增以下此行:把 JSON 格式的字串轉換成 JavaScript 的物件 */
const json = JSON.parse(body) //typeof(json) is object
for (let i=0; i<10; i++) {
console.log(json[i].id, json[i].name)
}
} catch(error){
cosole.log(error)
}
}
)
再輸出一次:
$ node index.js
1 克雷的橋
2 當我想你時,全世界都救不了我
3 我殺的人與殺我的人
4 念念時光真味
5 蜂蜜花火【致年少時光‧限量插畫設計書衣典藏版】
6 苦雨之地
7 你已走遠,我還在練習道別
8 想把餘生的溫柔都給你
9 你是我最熟悉的陌生人
10 偷書賊(25萬本紀念版本)